import React, { useState } from 'react'
import { Navigate } from 'react-router-dom'

export default function Home() {
  const [sum, setSum] = useState(1)

  return (
    <div>
      <h2>Home页面</h2>
      <h4>{sum}</h4>
      <button onClick={() => { setSum(Math.random()) }}>change</button>
      {/* <button onClick={setSum(Math.random())}>change</button>    这种写法会在解析时直接调用setSum，因为setSum后面有小括号。写成箭头函数的形式，则在解析时返回 setSum() 这个函数，当点击时直接调用。*/}

      {/* 当符合前两个条件时，就跳转到About页面，这里也使用Navigate */}
      {sum > 0.5 && sum != 1 && <Navigate to='/about' />}
    </div>
  )
}
